<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <title>Jakin极客说-个人博客网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/vendor/jquery.min.js"></script>
    <script src="./js/vendor/jquery.easyfader.min.js"></script>
    <script src="./js/vendor/scrollReveal.js"></script>
    <script src="./js/vendor/hc-sticky.js"></script>
    <script src="./js/main.js"></script>
</head>

<body>
    <!--[if lte IE8]>
<p class="browserupgrade">您的浏览器版本太低，请到<a href="http://browserhappy.com">这里</a>更新。</p>
<![endif]-->
    <header id="header">
        <nav class="top clearfix">
            <div class="logo"><a href="#">Jakin极客说</a></div>
            <span class="navicon"></span>
            <ul>
                <li> <a href="#" class="current">网站首页</a></li>
                <li> <a href="#">学无止境</a></li>
                <li> <a href="#">博客日记</a></li>
                <li> <a href="#">资源分享</a></li>
                <li> <a href="#">关于我</a></li>
                <li> <a href="#" target="_blank">时间轴</a></li>
            </ul>
            <!-- <div class="search-form">
                <form class="search-box" style="display:none;">
                    <input type="text">
                </form>
                <span><img src="./image/searchbg.png"></span>
            </div> -->
        </nav>
    </header>
    <div class="container clearfix">
        <article>
            <div class="banner">
                <div id="banner" class="fader">
                    <li class="slide"><a href="/" target="_blank"><img src="./image/p1.jpg"><span
                                class="imginfo">别让这些闹心的套路，毁了你的网页设计!</span></a></li>
                    <li class="slide"><a href="/" target="_blank"><img src="./image/p2.jpg"><span
                                class="imginfo">网页中图片属性固定宽度，如何用js改变大小</span></a></li>
                    <li class="slide"><a href="/" target="_blank"><img src="./image/1.jpg"><span
                                class="imginfo">个人博客，属于我的小世界！</span></a></li>
                    <li class="slide"><a href="/" target="_blank"><img src="./image/p3.jpg"><span
                                class="imginfo">个人博客，属于我的小世界！</span></a></li>
                    <li class="slide"><a href="/" target="_blank"><img src="./image/3.jpg"><span
                                class="imginfo">个人博客，属于我的小世界！</span></a></li>
                    <div class="fader_controls">
                        <div class="page prev" data-target="prev">&lsaquo;</div>
                        <div class="page next" data-target="next">&rsaquo;</div>
                        <ul class="pager_list">
                        </ul>
                    </div>
                </div>
            </div>
            <section class="news-box clearfix">
                <ul>
                    <li>
                        <span><a href="#" target="_blank"><img src="./image/1.jpg"></a></span>
                        <h3><a href="#" target="_blank">html5 个人博客模板《青春的回忆》</a></h3>
                    </li>
                    <li>
                        <span><a href="#" target="_blank"><img src="./image/2.jpg"></a></span>
                        <h3><a href="#" target="_blank">html5 个人博客模板《青春的回忆》</a></h3>
                    </li>
                    <li>
                        <span><a href="#" target="_blank"><img src="./image/3.jpg"></a></span>
                        <h3><a href="#" target="_blank">html5 个人博客模板《青春的回忆》</a></h3>
                    </li>
                    <li>
                        <span><a href="#" target="_blank"><img src="./image/4.jpg"></a></span>
                        <h3><a href="#" target="_blank">html5 个人博客模板《青春的回忆》</a></h3>
                    </li>
                </ul>
            </section>
            <section class="blogtab">
                <ul>
                    <li><a href="">最新文章</a></li>
                    <li><a href="">热门文章</a></li>
                    <li><a href="">推荐阅读</a></li>
                </ul>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="1"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">Centos7 搭建lnmp环境</a></h3>
                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/2.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="2"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>
                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/2.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="3"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>
                <div class="content clearfix">
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="4"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>
                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/1.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="5"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>

                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/10.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="6"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>

                <div class="content clearfix">
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="7"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>

                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/10.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="8"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>

                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/10.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="9"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>

                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/10.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="blogs" data-scroll-reveal="enter bottom over 1s" data-scroll-reveal-id="10"
                style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;perspective: 1000;backface-visibility: hidden;"
                data-scroll-reveal-initialized="true">
                <i></i>
                <h3 class="title"><a href="#">html5 个人博客模板《青春的回忆》</a></h3>
                <div class="content clearfix">
                    <div class="pic">
                        <img src="./image/10.jpg" alt="">
                    </div>
                    <div class="summary">
                        如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if
                        来判断，输出。思路已打开，样式调用就可以多样化啦！...
                    </div>
                    <div class="info">
                        <ul>
                            <li class="author">jakin</li>
                            <li class="label"><a href="#" target="_blank">网站建设</a></li>
                            <li class="time">2018-06-19</li>
                            <li class="view"><span>666</span>已阅读</li>
                        </ul>
                    </div>
                </div>
            </section>
        </article>
        <aside class="right-nav">
            <section class="topic">
                <li>
                    <a href="#">
                        <i><img src="./image/p3.jpg"><i>
                                <h2>【匆匆难年】总结个人入门IT经历...</h2>
                                <span>博客日记</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i><img src="./image/p4.jpg"></i>
                        <h2>【大学时光】如何度过你的大学时光...</h2>
                        <span>学无止境</span>
                    </a>
                </li>
            </section>
            <section class="about-me">
                <span>博主简介</span>
                <div class="user-info">
                    <img src="./image/face.jpg">
                    <p><b>jakin</b>，在校大学生一枚。爱生活，爱自由！喜欢捣鼓计算机，热衷于前端开发。</p>
                </div>
            </section>
            <section class="group">
                <span>文章分类</span>
                <ul>
                    <li><a href="/">学无止境（33）</a></li>
                    <li><a href="/">博客日记（19）</a></li>
                    <li><a href="/">慢生活（520）</a></li>
                </ul>
            </section>
            <section class="recommend">
                <span id="tab">
                    <a href="#" class="current">点击排行</a>
                    <a href="#">站长推荐</a>
                </span>
                <div id="content">
                    <ul>
                        <li><a href="#">第二届 优秀个人博客模板比赛参选活动</a></li>
                        <li><a href="#">【活动作品】柠檬绿兔小白个人博客模板</a></li>
                        <li><a href="#">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
                        <li><a href="#">2014年度优秀个人博客评选活动</a></li>
                        <li><a href="#">你是什么人便会遇上什么人</a></li>
                        <li><a href="#">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
                        <li><a href="#">2014年度优秀个人博客评选活动</a></li>
                        <li><a href="#">你是什么人便会遇上什么人</a></li>
                    </ul>
                    <ul style="display:none;">
                        <li><a href="#">个人博客，我为什么要用帝国cms？</a></li>
                        <li><a href="#">张建华 一个90后年轻站长！我们是对手亦是朋友！</a></li>
                        <li><a href="#">《奋斗电商》看知名微商如何做博客引流？</a></li>
                        <li><a href="#">《寻之旅》一个关于旅游，游记的个人博客</a></li>
                        <li><a href="#">【匆匆那些年】总结个人博客经历的这四年</a></li>
                        <li><a href="#">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
                        <li><a href="#">2014年度优秀个人博客评选活动</a></li>
                        <li><a href="#">你是什么人便会遇上什么人</a></li>
                    </ul>
                </div>
            </section>
            <section class="concern">
                <span>欢迎加群</span>
                <ul>
                    <img src="image/qq.png">
                </ul>
            </section>
        </aside>

    </div>
    <footer>
        <p>Design by <a href="#" target="_blank">极客说 </a>辽ICP备</p>
    </footer>
</body>

</html>